<template>
  <div>
    <van-nav-bar
      style="background-color: Gainsboro;"
      title="系统设置"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="main">
      <router-link to="/user/user">
        <div class="item">
          <p>编辑资料</p>
          <div class="right" style="display: flex;">
            <van-icon name="arrow" />
          </div>
        </div>
      </router-link>
        <div class="item">
          <p>允许使用移动网络播放/下载视频</p>
          <div class="right" style="display: flex;">
            <van-switch :value="checked1" @input="onInput1" />
          </div>
        </div>
        <div class="item">
          <p>WLAN下自动下载最新剧集</p>
          <div class="right" style="display: flex;">
            <van-switch :value="checked2" @input="onInput2" />
          </div>
        </div>
        <div class="item">
          <p>离线下载清晰图</p>
          <div class="right" style="display: flex;">
            <p>
              <van-cell is-link title="高清" @click="show = true" />
              <van-action-sheet
                v-model="show"
                :actions="actions"
                cancel-text="取消"
                close-on-click-action
                @cancel="onCancel"
              />
            </p>
          </div>
        </div> 
        <div class="item">
          <p>剧集/视频自动连续播放</p>
          <div class="right" style="display: flex;">
            <van-switch :value="checked3" @input="onInput3" />
          </div>
        </div>
        <div class="item">
          <p>跳过片头片尾</p>
          <div class="right" style="display: flex;">
            <van-switch :value="checked4" @input="onInput4" />
          </div>
        </div>
        <div class="item">
          <p>推送通知</p>
          <div class="right" style="display: flex;">
            <van-switch :value="checked5" @input="onInput5" />
          </div>
        </div>
        <div class="item">
          <p>清除缓存</p>
          <div class="right" style="display: flex;">
            <van-cell is-link @click="showPopup1">10M</van-cell>
            <van-popup :value="checked6" @input="onInput6" v-model="show1"></van-popup>
          </div>
        </div>
        <div class="item">
          <p>检查版本</p>
          <div class="right" style="display: flex;">
            <p>1.0</p>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from 'vant';


  export default {
    data() {
      return {
        checked1: false,
        checked2: false,
        checked3: false,
        checked4: false,
        checked5: false,
        checked6: false,
        show: false,
        show1: false,
        actions: [
          { name: '蓝光' }, { name: '超清' }, { name: '高清' }, { name: '标清' }],
        };
    },
    methods: {

      showPopup1() {
        this.show1 = true;
      },

      onCancel() {
        Toast('取消');
      },

      onClickLeft() {
        this.$router.push('/home/my')
      },

      onInput1(checked1) {
        Dialog.confirm({
          title: '提醒',
          message: '是否允许使用移动网络播放/下载视频？',
        }).then(() => {
          this.checked1 = checked1;
        });
      },

      onInput2(checked2) {
        Dialog.confirm({
          title: '提醒',
          message: '是否允WLAN下自动下载最新剧集？',
        }).then(() => {
          this.checked2 = checked2;
        });
      },

      onInput3(checked3) {
        Dialog.confirm({
          title: '提醒',
          message: '是否允许剧集/视频自动连续播放？',
        }).then(() => {
          this.checked3 = checked3;
        });
      },

      onInput4(checked4) {
        Dialog.confirm({
          title: '提醒',
          message: '是否跳过片头片尾？',
        }).then(() => {
          this.checked4 = checked4;
        });
      },

      onInput5(checked5) {
        Dialog.confirm({
          title: '提醒',
          message: '是否允许推送通知？',
        }).then(() => {
          this.checked5 = checked5;
        });
      },

      onInput6(checked6) {
        Dialog.confirm({
          title: '提醒',
          message: '是否清除数据？',
        }).then(() => {
          this.checked6 = checked6;
        });
      },

    },
  }
</script>

<style lang="scss" scoped>
.item{
  display: flex; 
  justify-content: space-between;
  font-size: 15px;
  padding: 18px 22px;
  border-bottom: 2px solid rgb(228, 211, 211);
}
</style>